<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>todoList-千锋教育</title>
	<script src="./lib/vue2.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-size: 16px;
			background: #CDCDCD;
		}

		header {
			height: 50px;
			background: #333;
			background: rgba(47, 47, 47, 0.98);
		}

		section {
			margin: 0 auto;
		}

		label {
			float: left;
			width: 100px;
			line-height: 50px;
			color: #DDD;
			font-size: 24px;
			cursor: pointer;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		}

		header input {
			float: right;
			width: 60%;
			height: 24px;
			margin-top: 12px;
			text-indent: 10px;
			border-radius: 5px;
			box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
			border: none
		}

		input:focus {
			outline-width: 0
		}

		h2 {
			position: relative;
		}

		span {
			position: absolute;
			top: 2px;
			right: 5px;
			display: inline-block;
			padding: 0 5px;
			height: 20px;
			border-radius: 20px;
			background: #E6E6FA;
			line-height: 22px;
			text-align: center;
			color: #666;
			font-size: 14px;
		}

		ol,
		ul {
			padding: 0;
			list-style: none;
		}

		li input {
			position: absolute;
			top: 2px;
			left: 10px;
			width: 22px;
			height: 22px;
			cursor: pointer;
		}

		p {
			margin: 0;
		}

		li p input {
			top: 3px;
			left: 40px;
			width: 70%;
			height: 20px;
			line-height: 14px;
			text-indent: 5px;
			font-size: 14px;
		}

		li {
			height: 32px;
			line-height: 32px;
			background: #fff;
			position: relative;
			margin-bottom: 10px;
			padding: 0 45px;
			border-radius: 3px;
			border-left: 5px solid #629A9C;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
		}

		ol li {
			cursor: move;
		}

		ul li {
			border-left: 5px solid #999;
			opacity: 0.5;
		}

		li a {
			position: absolute;
			top: 2px;
			right: 5px;
			display: inline-block;
			width: 14px;
			height: 12px;
			border-radius: 14px;
			border: 6px double #FFF;
			background: #CCC;
			line-height: 14px;
			text-align: center;
			color: #FFF;
			font-weight: bold;
			font-size: 14px;
			cursor: pointer;
		}

		footer {
			color: #666;
			font-size: 14px;
			text-align: center;
		}

		footer a {
			color: #666;
			text-decoration: none;
			color: #999;
		}

		@media screen and (max-device-width: 620px) {
			section {
				width: 96%;
				padding: 0 2%;
			}
		}

		@media screen and (min-width: 620px) {
			section {
				width: 600px;
				padding: 0 10px;
			}
		}
	</style>
</head>

<body>
	<div id="out_box">
		<!-- 头部结构 -->
		<header>
			<section>
				<form action="javascript:void(0)" id="form">
					<label for="title">ToDoList</label>
					<!-- 头部输入框 -->
					<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off"
						v-model="addContent" @keydown.13="addTodoList(addContent)" />
				</form>
			</section>
		</header>
		<!-- 内容容器 -->
		<section>
			<h2>正在进行 <span id="todocount">{{todo_list.length}}</span></h2>
			<!-- 待办列表 -->
			<ol id="todolist" class="demo-box">
				<!-- li结构 -->
				<li draggable="true" v-for="(item,index) in todo_list">
					<input type="checkbox" @click.prevent="todoclick(item,index)">
					<p id="p-0">{{item}}</p><a href="javascript:void(0)" @click="deleteTodoList(index)">-</a>
				</li>
			</ol>
			<h2>已经完成 <span id="donecount">{{done_list.length}}</span></h2>
			<!-- 完成列表 -->
			<ul id="donelist">
				<!-- 完成结构 -->
				<li draggable="true" v-for="(itm,ind) in done_list">
					<input type="checkbox" @click.prevent="doneclick(itm,ind)" checked>
					<p id="p-0">{{itm}}</p><a href="javascript:void(0)" @click="deleteDoneList(ind)">-</a>
				</li>
			</ul>
		</section>
		<!-- 脚部标题 -->
		<footer>
			千锋教育
		</footer>
	</div>
	<style>
		#out_box {
			width: 100%;
			height: 100%;
		}
	</style>
	<script>

		var app = new Vue({
			// 最外层包裹一个div，用这个id进行挂载
			el: "#out_box",
			data() {
				return {
					addContent: "",
					todo_list:localStorage.getItem("todo_list")?localStorage.getItem("todo_list").split(",") : [],
					done_list:localStorage.getItem("done_list")?localStorage.getItem("done_list").split(",") : [],
				}
			},
			methods: {
				// --------------头部keydown事件：输入框enter时，todo_list数组添加数据
				addTodoList(addContent) {
					// 数据绑定
					this.addContent = addContent;
					// 添加数组
					if (addContent.match(/\S+/)) {
						this.todo_list.push(this.addContent);
						// 清空输入框内容
						this.addContent = "";
						this.todoSave();
					} else {
						return
					}
				},
				// -----------------todo点击事件：点击超链接，删除li
				deleteTodoList(index) {
					// 数组的第index项删除
					this.todo_list.splice(index, 1);
					this.todoSave();
				},
				// -----------------todo change事件：点击勾选框，删除li，并添加到done_list
				todoclick(item, index) {
					// 添加到donelist部分
					this.done_list.push(item);
					// 调用删除函数,删除todolist
					this.deleteTodoList(index);
					this.todoSave();
					this.doneSave();
				},
				// -----------------done change事件：点击勾选框，删除li，并添加到todo_list
				doneclick(itm, ind) {
					// 添加到todolist部分
					this.todo_list.push(itm);
					// 调用删除函数,删除donelist
					this.deleteDoneList(ind);
					this.todoSave();
					this.doneSave();
				},
				// ------------------done点击事件：点击超链接，删除li
				deleteDoneList(ind) {
					this.done_list.splice(ind, 1);
					this.doneSave();
				},
				// ------------------存储localhost
				// ----todo存储，每次事件函数中，调用
				todoSave() {
					localStorage.setItem("todo_list",this.todo_list)
				},
				// ----done存储，每次事件函数中，调用
				doneSave() {
					localStorage.setItem("done_list",this.done_list)
				}
			}
		})


	</script>
</body>

</html>